<template>
  <div class="nav-tabs">
    <div :class="['tab', {active: $route.path === '/dashBoard'}]">首页</div>
    <div
      :class="['tab', {active: $route.path === tab.path}]"
      v-for="(tab, index) in $store.state.base.navTabs" :key="tab.path"
      @click="switchTab(tab.path)"
      @contextmenu.prevent="showMenu($event, index)"
    >
      <span>{{tab.name}}</span>
      <i class="el-icon-close" @click.stop="delTab(index)"></i>
    </div>
    <!-- 右键弹出菜单 -->
    <div
      class="tab-menu"
      v-show="tabMenuShow"
      :style="{left: left+'px', top: top+'px'}">
      <div class="tab-menu-item" @click="$router.go(0)">刷新</div>
      <div class="tab-menu-item" @click="delSelf">关闭</div>
      <div class="tab-menu-item" @click="delOther">关闭其他</div>
      <div class="tab-menu-item" @click="delAll">关闭所有</div>
    </div>
    <!-- /右键弹出菜单 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      left: 0,
      top: 0,
      tabMenuShow: false,
      // 删除 navTab下标
      delIndex: -1
    }
  },
  mounted () {
    // 点击任意空白区域 关闭navTab的右键菜单
    document.onclick = () => {
      this.tabMenuShow = false
    }
  },
  methods: {
    delAll () {
      // 点击右键菜单删除所有
      this.$store.commit('base/DEL_ALL_TAB')
    },
    delOther () {
      // 点击右键菜单删除其他
      this.$store.commit('base/DEL_OTHER_TAB', this.delIndex)
    },
    delSelf () {
      // 点击右键菜单 删除自己
      this.$store.commit('base/DEL_TAB', this.delIndex)
    },
    showMenu (e, index) {
      // navTab 右键弹出自定义菜单
      this.tabMenuShow = true
      this.left = e.clientX + 2
      this.top = e.clientY + 2
      // 将点击的 navTab下标赋值 给 delIndex
      this.delIndex = index
    },
    switchTab (path) {
      // 点击tab跳转页面
      this.$router.push(path)
    },
    delTab (index) {
      // 点击tab关闭图标删除当前的tab
      this.$store.commit('base/DEL_TAB', index)
    }
  },
  beforeDestroy () {
    document.onclick = null
  }
}
</script>

<style lang="scss" scoped>
  .nav-tabs{
    display: flex;
    width: 100%;
    overflow-x: auto;
    margin-top: -10px;
    margin-bottom: 15px;
    .tab{
      line-height: 28px;
      flex-shrink: 0;
      padding: 0 8px;
      margin-left: 10px;
      background-color: #fff;
      border-radius: 5px;
      font-size: 14px;
      color: #333;
      cursor: pointer;
      &.active{
        color: #1890ff;
      }
    }
  }
  .tab-menu{
    position: fixed;
    background-color: #fff;
    border-radius: 3px;
    z-index:10000;
    &-item{
      line-height: 28px;
      font-size: 12px;
      color: #333;
      text-align: center;
      cursor: pointer;
      padding:0 10px;
      &:hover{
        background-color: rgba(0,0,0,.3);
      }
    }
  }
</style>
